<template>
  <!-- 最外层的大盒子 -->
  <div class="big-box">
    <div class="box" ref="box" v-if="!isMobile">
      <!-- 滑动盒子 -->
      <div class="slide-box" ref="slideRef">
        <h1 class="slide-title" v-if="switchLock">欢迎登录-KOI-ADMIN🌻</h1>
        <h1 class="slide-title" v-if="!switchLock">欢迎注册-KOI-ADMIN🌻</h1>
        <p class="slide-title">JOIN US</p>
        <div class="img-box">
          <img class="select-none" :src="switchLogo" alt="LOGO" />
        </div>
        <div class="slide-button" v-if="switchLock" @click="koiSwitchRegister">还没有账户？点击注册🍀</div>
        <div class="slide-button" v-if="!switchLock" @click="koiSwitchLogin">已存在账户？点击登录🍀</div>
      </div>

      <!-- 注册盒子 -->
      <div class="register-form">
        <!-- 标题盒子 -->
        <div class="register-title">
          <h1>用户注册🌻</h1>
        </div>
        <!-- 输入框盒子 -->
        <el-form ref="registerFormRef" :model="registerForm" :rules="registerRules">
          <el-form-item prop="regLoginName">
            <el-input type="text" placeholder="请输入用户名" :suffix-icon="User" v-model="registerForm.regLoginName" />
          </el-form-item>
          <el-form-item prop="regPwd">
            <el-input type="password" placeholder="请输入密码" show-password :suffix-icon="Lock" v-model="registerForm.regPwd" />
          </el-form-item>
          <el-form-item prop="regConfirmPwd">
            <el-input
              type="password"
              placeholder="请输入确认密码"
              show-password
              :suffix-icon="Lock"
              v-model="registerForm.regConfirmPwd"
            />
          </el-form-item>
          <el-form-item prop="regCode">
            <el-input type="text" placeholder="请输入邀请码" v-model="registerForm.regCode" />
          </el-form-item>
        </el-form>
        <!-- 注册按钮盒子 -->
        <div class="register-btn-box">
          <el-button class="register-btn" v-if="!loading" @click="handleRegister">注册🌻</el-button>
          <el-button class="register-disabled-btn" v-if="loading" :loading="loading">注册中</el-button>
        </div>
      </div>

      <!-- 登录盒子 -->
      <div class="login-form">
        <!-- 标题盒子 -->
        <div class="login-title">
          <h1>LOGIN🍀</h1>
        </div>
        <!-- 输入框盒子 -->
        <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules">
          <el-form-item prop="userName">
            <el-input type="text" placeholder="请输入用户名" :suffix-icon="User" v-model="loginForm.loginName" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" placeholder="请输入密码" show-password :suffix-icon="Lock" v-model="loginForm.password" />
          </el-form-item>
          <el-form-item prop="securityCode">
            <el-input
              type="text"
              placeholder="请输入验证码"
              :suffix-icon="Open"
              v-model="loginForm.securityCode"
              @keydown.enter="handleKoiLogin"
            ></el-input>
          </el-form-item>
          <el-form-item class="m-t--10px">
            <img class="w-100px h-30px" :src="loginForm.captchaPicture" @click="handleCaptcha" />
            <div class="text-gray-400 hover:text-#8B5CF6 text-12px m-10px select-none" @click="handleCaptcha">看不清，换一张</div>
          </el-form-item>
        </el-form>
        <!-- 登录按钮盒子 -->
        <div class="login-btn-box">
          <el-button class="login-btn" v-if="!loading" @click="handleKoiLogin">登录🌻</el-button>
          <el-button class="login-disabled-btn" v-if="loading" :loading="loading">登录中</el-button>
        </div>
      </div>
    </div>

    <!-- 备案号-->
    <div class="beianhao" v-if="!isMobile">
      <a href="https://beian.miit.gov.cn/" target="_blank">网站备案号：豫ICP备2022022094号-1</a>
    </div>

    <!-- 移动端登录盒子 -->
    <div class="login-form" v-if="isMobile">
      <!-- 标题盒子 -->
      <div class="login-title">
        <h1>LOGIN🍀</h1>
      </div>
      <!-- 输入框盒子 -->
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules">
        <el-form-item prop="userName">
          <el-input type="text" placeholder="请输入用户名" :suffix-icon="User" v-model="loginForm.loginName" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" placeholder="请输入密码" show-password :suffix-icon="Lock" v-model="loginForm.password" />
        </el-form-item>
        <el-form-item prop="securityCode">
          <el-input
            type="text"
            placeholder="请输入验证码"
            :suffix-icon="Open"
            v-model="loginForm.securityCode"
            @keydown.enter="handleKoiLogin"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <div class="flex flex-items-center">
            <img class="w-100px h-30px" :src="loginForm.captchaPicture" @click="handleCaptcha" />
            <div class="text-gray-400 hover:text-#8B5CF6 w-100px text-12px m-l-10px select-none" @click="handleCaptcha">
              看不清，换一张
            </div>
          </div>
        </el-form-item>
      </el-form>
      <!-- 按钮盒子 -->
      <div class="login-btn-box">
        <el-button class="login-btn" v-if="!loading" @click="handleKoiLogin">登录🌻</el-button>
        <el-button class="login-disabled-btn" v-if="loading" :loading="loading">登录中</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { User, Lock, Open } from "@element-plus/icons-vue";
import { ref, reactive, onMounted, onUnmounted } from "vue";
import { getAssets } from "@/utils/index.ts";
import { encrypt, secretKey } from "@/utils/aesUtil.ts"

/** 适配移动端开始 */
import { useScreenStore } from "@/hooks/screen/index.ts";
// 获取当前为[移动端、IPad、PC端]仓库，阔以使用 watchEffect(() => {}) 进行监听。
const { isMobile } = useScreenStore();
/** 适配移动端结束 */

import type { FormInstance, FormRules } from "element-plus";
import { koiMsgError, koiNoticeSuccess } from "@/utils/koi.ts";
import { useRouter } from "vue-router";
import { koiLogin, getCaptcha, koiRegister } from "@/api/system/login/index.ts";
import useUserStore from "@/stores/modules/user.ts";
import useKeepAliveStore from "@/stores/modules/keepAlive.ts";
import { HOME_URL } from "@/config/index.ts";
import { initDynamicRouter } from "@/routers/modules/dynamicRouter.ts";
import useTabsStore from "@/stores/modules/tabs.ts";

const userStore = useUserStore();
const tabsStore = useTabsStore();
const keepAliveStore = useKeepAliveStore();
const router = useRouter();

/** 用户登录代码 */
const loginFormRef = ref<FormInstance>();
const loading = ref(false);

interface ILoginUser {
  loginName: string;
  password: string | number;
  securityCode: string | number;
  codeKey: string | number;
  captchaPicture: any;
}

const loginForm = reactive<ILoginUser>({
  loginName: "yuadmin",
  password: "123456",
  securityCode: "",
  codeKey: "",
  captchaPicture: ""
});

const loginRules = reactive<FormRules<ILoginUser>>({
  loginName: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
  password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
  securityCode: [{ required: true, message: "验证码不能为空", trigger: "blur" }]
});

/** 获取验证码 */
const handleCaptcha = async () => {
  try {
    const res: any = await getCaptcha();
    loginForm.codeKey = res.data.codeKey;
    loginForm.captchaPicture = res.data.captchaPicture;
  } catch (error) {
    console.log(error);
    koiMsgError("验证码获取失败🌻");
  }
};

const koiTimer = ref();
// 验证码定时器
const getCaptchaTimer = () => {
  koiTimer.value = setInterval(() => {
    // 执行刷新数据的方法
    handleCaptcha();
  }, 345 * 1000);
};

/** 登录 */
const handleKoiLogin = () => {
  if (!loginFormRef.value) return;
  (loginFormRef.value as any).validate(async (valid: any, fields: any) => {
    const loginName = loginForm.loginName;
    const password = encrypt(loginForm.password, secretKey.AES_PWD_SECRET_KEY);
    const securityCode = loginForm.securityCode;
    const codeKey = loginForm.codeKey;
    if (valid) {
      loading.value = true;
      try {
        // 1、执行登录接口
        const res: any = await koiLogin({ loginName, password, codeKey, securityCode });
        userStore.setToken(res.data.tokenValue);

        // 2、添加动态路由 AND 用户按钮 AND 角色信息 AND 用户个人信息
        await initDynamicRouter();

        // 3、清空 tabs数据、keepAlive缓存数据
        tabsStore.setTab([]);
        keepAliveStore.setKeepAliveName([]);

        // 4、跳转到首页
        loading.value = false;
        router.push(HOME_URL);
      } catch (error) {
        // 等待1秒关闭loading
        let loadingTime = 1;
        setInterval(() => {
          loadingTime--;
          if (loadingTime === 0) {
            loading.value = false;
          }
        }, 1000);
      }
    } else {
      console.log("登录校验失败", fields);
      koiMsgError("校验失败，信息填写有误🌻");
    }
  });
};

const registerFormRef = ref<FormInstance>();
interface IRegisterForm {
  regLoginName: any;
  regPwd: string | number;
  regConfirmPwd: string | number;
  regCode?: string;
}

/** 注册代码 */
const registerForm = reactive<IRegisterForm>({
  regLoginName: "KOI-ADMIN",
  regPwd: "123456",
  regConfirmPwd: "1234567",
  regCode: "yuadmin"
});

const registerRules = {
  regLoginName: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
  regPwd: [{ required: true, message: "密码不能为空", trigger: "blur" }],
  regConfirmPwd: [{ required: true, message: "确认密码不能为空", trigger: "blur" }],
  regCode: [{ required: true, message: "注册邀请码不能为空", trigger: "blur" }]
};

// 进入页面加载管理员信息
onMounted(() => {
  // 获取验证码
  handleCaptcha();
  // 局部刷新定时器
  getCaptchaTimer();
});

onUnmounted(() => {
  // 清除局部刷新定时器
  clearInterval(koiTimer.value);
  koiTimer.value = null;
});

/** 注册 */
const handleRegister = () => {
  if (registerForm.regPwd != registerForm.regConfirmPwd) {
    koiMsgError("两次密码输入不同，请检查后重新注册！");
    return false;
  }
  if (!registerFormRef.value) return;
  (registerFormRef.value as any).validate(async (valid: any, fields: any) => {
    if (valid) {
      loading.value = true;
      try {
        const regLoginName = registerForm.regLoginName;
        const regPwd = registerForm.regPwd;
        const regConfirmPwd = registerForm.regConfirmPwd;
        const regCode = registerForm.regCode;
        await koiRegister({ regLoginName, regPwd, regConfirmPwd, regCode });
        loading.value = false;
        koiNoticeSuccess("注册成功，请前去登录🌻");
      } catch (error) {
        console.log(error);
        // 等待1秒关闭loading
        let loadingTime = 1;
        setInterval(() => {
          loadingTime--;
          if (loadingTime === 0) {
            loading.value = false;
          }
        }, 1000);
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};

// 切换开关
const switchLock = ref(true);
// 切换Logo
const switchLogo = ref(`${getAssets("images/login/waoku.jpg")}`);
// 根据ref设置css
const slideRef = ref();
// 切换按钮背景颜色
const switchBtnBgAndSlideTitle = ref("#FE3E7C");
// 切换按钮悬浮背景颜色
const switchBtnHoverBg = ref("#F9739E");
/** 切换登录 */
const koiSwitchLogin = () => {
  switchLock.value = true;
  switchLogo.value = `${getAssets("images/login/waoku.jpg")}`;
  slideRef.value.style.background = "#edd4dc";
  slideRef.value.style.transform = "translateX(0%)"; // 设置元素的 transform 属性来触发过渡
  switchBtnBgAndSlideTitle.value = "#FE3E7C";
  switchBtnHoverBg.value = "#F9739E";
};

/** 切换注册 */
const koiSwitchRegister = () => {
  switchLock.value = false;
  switchLogo.value = `${getAssets("images/login/wuwu.jpg")}`;
  slideRef.value.style.background = "#c9e0ed";
  slideRef.value.style.transform = "translateX(100%)"; // 设置元素的 transform 属性来触发过渡
  switchBtnBgAndSlideTitle.value = "#409EFF";
  switchBtnHoverBg.value = "#79BBFF";
};
</script>

<style lang="scss" scoped>
/** 备案号 */
.beianhao {
  position: absolute;
  bottom: 10px;
  left: 45%;
  font-size: 12px;
  font-weight: bold;
}

/** 最外层大盒子 */
.big-box {
  display: flex;

  /* 溢出隐藏 */
  height: 100vh;
  overflow-x: hidden;

  /* 渐变方向从左到右 */
  background: linear-gradient(to right, rgb(247 209 215), rgb(191 227 241));
}

/* 最外层的大盒子 */
.box {
  /* 相对定位 */
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 720px;
  min-height: 400px;
  margin: auto;

  /* 设置边框 */
  border: 1px solid rgb(255 255 255 / 60%);

  /* 设置圆角 */
  border-radius: 8px;

  /* 设置盒子阴影 */
  box-shadow: 2px 1px 19px rgb(0 0 0 / 10%);
}

/* 滑动的盒子 */
.slide-box {
  /* 绝对定位 */
  position: absolute;

  /* 距离大盒子顶部为0 */
  top: 0;

  /* 距离大盒子左侧为0 */
  left: 0;
  z-index: 10;

  /* 宽度为大盒子的一半 */
  width: 50%;
  height: 100%;
  font-size: 16px;
  background-color: #edd4dc;
  border-radius: 4px;
  box-shadow: 2px 1px 19px rgb(0 0 0 / 10%);

  /* 动画过渡，先加速再减速 */
  transition: 0.5s ease-in-out;
}

/* 滑动盒子的标题 */
.slide-box h1 {
  margin-top: 50px;
  font-weight: bold;
  text-align: center;

  /* 文字阴影 */
  text-shadow: 4px 4px 3px rgb(0 0 0 / 10%);

  /* 文字间距 */
  letter-spacing: 2px;

  /* 禁止选中 */
  user-select: none;
}

/* 滑动盒子的文字 */
.slide-box p {
  height: 30px;
  margin: 20px 0;
  font-weight: bold;
  line-height: 30px;
  text-align: center;
  text-shadow: 4px 4px 3px rgb(0 0 0 / 10%);

  /* 禁止选中 */
  user-select: none;
}

/* 滑动盒子的点击切换变化文字颜色 */
.slide-title {
  font-size: 20px;
  color: v-bind(switchBtnBgAndSlideTitle);
}

/* LOGO图片盒子 */
.img-box {
  width: 80px;
  height: 80px;
  margin: auto;
  margin-top: 30px;
  overflow: hidden;

  /* 设置用户禁止选中 */
  user-select: none;

  /* 设置为圆形 */
  border-radius: 50%;
  box-shadow: 4px 4px 3px rgb(0 0 0 / 10%);
}

/* LOGO图片 */
.img-box img {
  width: 100%;

  /* 动画过渡，先加速再减速 */
  transition: 0.5s ease-in-out;
}

/* 没有账号去登录按钮 */
.slide-button {
  width: 160px;
  padding: 8px 16px;
  margin: auto;
  margin-top: 60px;
  font-size: 14px;
  line-height: 14px;
  color: #ffffff;
  cursor: pointer;

  /* 设置用户禁止选中 */
  user-select: none;
  background: v-bind(switchBtnBgAndSlideTitle);
  border: 1px solid rgb(255 255 255);
  border-radius: 20px;
  box-shadow: 4px 4px 3px rgb(0 0 0 / 10%);
  &:hover {
    background: v-bind(switchBtnHoverBg);
  }
}

/* 登录和注册盒子 */
.login-form,
.register-form {
  flex: 1; // 各占一半
  height: 100%;
}

/* 登录标题盒子 */
.login-title {
  height: 90px;
  line-height: 90px;
}

/* 登录标题 */
.login-title h1 {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
  text-align: center;
  text-shadow: 4px 4px 3px rgb(0 0 0 / 10%);
  letter-spacing: 5px;

  /* 禁止选中 */
  user-select: none;
}

/* 输入框盒子 */
.el-form {
  display: flex;

  /* 纵向布局 */
  flex-direction: column;

  /* 水平居中 */
  align-items: center;
}
.el-form-item {
  width: 60%;
}
.el-select {
  width: 100%;
}

/* 登录盒子位置 */
.login-btn-box {
  display: flex;
}

/* 登录按钮 */
.login-btn {
  height: 32px;
  padding: 8px 16px;
  margin: auto;
  font-size: 14px;
  line-height: 14px;
  color: #ffffff;
  cursor: pointer;

  /* 设置用户禁止选中 */
  user-select: none;
  background: #409eff;
  border: 1px solid rgb(255 255 255);
  border-radius: 20px;
  box-shadow: 4px 4px 3px rgb(0 0 0 / 10%);
  &:hover {
    background: #67aff7;
  }
}

/* 登录中按钮 */
.login-disabled-btn {
  height: 32px;
  padding: 8px 16px;
  margin: auto;
  font-size: 14px;
  line-height: 14px;
  color: #ffffff;
  pointer-events: none;
  cursor: pointer;

  /* 设置用户禁止选中 */
  user-select: none;
  background: #67aff7;
  border: 1px solid rgb(255 255 255);
  border-radius: 20px;
  box-shadow: 4px 4px 3px rgb(0 0 0 / 10%);
}

/* 注册标题盒子 */
.register-title {
  height: 98px;
  line-height: 98px;
}

/* 注册标题 */
.register-title h1 {
  font-size: 22px;
  font-weight: bold;
  color: #fe3e7c;
  text-align: center;
  text-shadow: 4px 4px 3px rgb(0 0 0 / 10%);
  letter-spacing: 5px;

  /* 禁止选中 */
  user-select: none;
}

/* 注册按钮盒子 */
.register-btn-box {
  display: flex;
}

/* 注册按钮 */
.register-btn {
  height: 32px;
  padding: 8px 16px;
  margin: auto;
  font-size: 14px;
  line-height: 14px;
  color: #ffffff;
  cursor: pointer;

  /* 设置用户禁止选中 */
  user-select: none;
  background: #fe3e7c;
  border: 1px solid rgb(255 255 255);
  border-radius: 20px;
  box-shadow: 4px 4px 3px rgb(0 0 0 / 10%);
  &:hover {
    background: #f9739e;
  }
}

/* 注册中按钮 */
.register-disabled-btn {
  height: 32px;
  padding: 8px 16px;
  margin: auto;
  font-size: 14px;
  line-height: 14px;
  color: #ffffff;
  cursor: pointer;

  /* 设置用户禁止选中 */
  user-select: none;
  background: #f9739e;
  border: 1px solid rgb(255 255 255);
  border-radius: 20px;
  box-shadow: 4px 4px 3px rgb(0 0 0 / 10%);
}

/** 输入框变黑 */
:deep(.el-input__wrapper) {
  @apply dark:bg-#1D1E1F;
}
</style>
